<script setup>
import { ref } from 'vue';
import { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
const modules = ref([Navigation, Pagination]);
const props = defineProps({
  images: {
    type: Array,
    default: () => [],
    required: true
  }
})
</script>

<template>
  <swiper :modules="modules" slides-per-view="auto" navigation pagination loop>
    <swiper-slide v-for="img in images" :key="img?.value">
      <img :src="img?.url" alt="" class="swiper-slide-img">
    </swiper-slide>
  </swiper>
</template>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 45vh;
  border-radius: 15px;
  .swiper-slide {
    background-color: #f8f8f8 !important;
  }
  .swiper-slide-img {
    width: 100%;
    height: 100%;
  }
  &:hover :deep(.swiper-button-next), &:hover :deep(.swiper-button-prev) {
    display: flex !important;
  }
}
:deep(.swiper-pagination-bullet-active) {
  background: #fff;
}
:deep(.swiper-button-next), :deep(.swiper-button-prev) {
  width: 30px;
  height: 30px;
  color: #999;
  background: #fff;
  border-radius: 50%;
  display: none !important;
  &::after {
    font-size: 16px;
  }
}
</style>